import { message } from 'antd';

import MyUpload from '@/components/MyUpload';
import {
  editSettings,
  findBySettingInfo,
  findBySettingsInfo,
} from '@/services/sys/sys_config';
import ProCard from '@ant-design/pro-card';
import {
  ProForm,
  ProFormColorPicker,
  ProFormItem,
  ProFormText,
  ProFormTextArea,
} from '@ant-design/pro-components';
import { useRequest } from 'ahooks';
import React, { useRef } from 'react';

const cloneTbale: React.FC = () => {
  // @ts-ignore
  const formRef = useRef<ProFormInstance>();
  const [form] = ProForm.useForm();
  const {
    data: settingInfo,
    runAsync: fetchBySettingInfo,
    loading,
  } = useRequest(findBySettingInfo, { manual: false });
  const rgbToHex = (r: number, g: number, b: number) => {
    const toHex = (component: number) =>
      component.toString(16).padStart(2, '0');
    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
  };

  return (
    <ProCard
      title={'系统配件'}
      onLoad={() => {
        findBySettingsInfo().then((res) => {
          formRef?.current?.setFieldsValue(res);
        });
      }}
    >
      <ProForm<API.SettingsInfo>
        initialValues={settingInfo}
        formRef={formRef}
        layout={'horizontal'}
        form={form}
        loading={loading}
        labelCol={{ span: 2 }}
        onFinish={(values) => {
          return new Promise((resolve, reject) => {
            editSettings(values)
              .then((res) => {
                resolve(true);
                message.success('操作成功');
              })
              .catch((err) => {
                reject(err);
                message.error('操作失败');
              });
          });
        }}
      >
        <ProFormItem label={'图标'} name={'logoId'}>
          <MyUpload
            id={settingInfo?.logoId}
            url={settingInfo?.logoUrl}
            type={8}
            onChange={(imageId) =>
              formRef?.current?.setFieldValue('logoId', imageId)
            }
          />
        </ProFormItem>
        <ProFormText label={'标题'} width={'md'} name={'title'} />
        <ProFormColorPicker
          convertValue={(color: any) => {
            if (color == undefined) {
              return color;
            }
            console.log('color', color);
            if (color.metaColor === undefined) {
              return color;
            }
            const { r, g, b } = color.metaColor;
            const hexColor = rgbToHex(r, g, b);
            console.log('hexColor', hexColor);
            formRef?.current?.setFieldValue('color', hexColor);
            return hexColor;
          }}
          onMetaChange={(color: any) => {
            console.log(color);
          }}
          format="hex"
          colors={['#fff', '#000']}
          label={'主题'}
          width={'md'}
          name={'color'}
        />
        <ProFormItem label={'登录页面'} name={'loginBgId'}>
          <MyUpload
            id={settingInfo?.loginBgId}
            url={settingInfo?.loginBgUrl}
            type={10}
            onChange={(imageId) => {
              formRef?.current?.setFieldValue('loginBgId', imageId);
            }}
          />
        </ProFormItem>
        <ProFormItem label={'证件模板'} name={'documentsId'}>
          <MyUpload
            id={settingInfo?.documentsId}
            url={settingInfo?.documentsUrl}
            type={11}
            onChange={(imageId) =>
              formRef?.current?.setFieldValue('documentsId', imageId)
            }
          />
        </ProFormItem>
        {/*    <ProFormSelect
          label="代理模型"
          width="md"
          name="agentType"
          request={findInvitationCategoryByList}
        />*/}
        <ProFormText label={'ICP'} width={'md'} name={'icp'} />
        <ProFormText label={'联系电话'} width={'md'} name={'tel'} />
        <ProFormText label={'联系客服'} width={'md'} name={'userName'} />
        <ProFormTextArea label={'系统备注'} width={'md'} name={'about'} />
      </ProForm>
    </ProCard>
  );
};

export default cloneTbale;
